<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/in.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>管理员用户管理</title>

<!-- Bootstrap -->
<link
	href="${staticPage}/script/bootstrap/bootstrap-3.3.5-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link href="${staticPage}/css/admin/admin.css" rel="stylesheet">
<link rel='icon' href='${staticPage}/image/title_logo.ico'
	type='image/x-ico' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${staticPage}/script/jquery/jquery-1.9.1.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="${staticPage}/script/bootstrap/bootstrap-3.3.5-dist/js/html5shiv.js"></script>
<script type="text/javascript" src="${staticPage}/script/bootstrap/bootstrap-3.3.5-dist/js/respond.js"></script>
 <![endif]-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript"
	src="${staticPage}/script/bootstrap/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="${staticPage}/script/laydate-master/laydate.dev.js"></script>
<script type="text/javascript">
function showLocale(objD) {
	var str, colorhead, colorfoot;
	var yy = objD.getYear();
	if (yy < 1900)
		yy = yy + 1900;
	var MM = objD.getMonth() + 1;
	if (MM < 10)
		MM = '0' + MM;
	var dd = objD.getDate();
	if (dd < 10)
		dd = '0' + dd;
	var hh = objD.getHours();
	if (hh < 10)
		hh = '0' + hh;
	var mm = objD.getMinutes();
	if (mm < 10)
		mm = '0' + mm;
	var ss = objD.getSeconds();
	if (ss < 10)
		ss = '0' + ss;
	var ww = objD.getDay();
	if (ww == 0)
		colorhead = "<font color=\"#02c69e\">";
	if (ww > 0 && ww < 6)
		colorhead = "<font color=\"#02c69e\">";
	if (ww == 6)
		colorhead = "<font color=\"#02c69e\">";
	if (ww == 0)
		ww = "星期日";
	if (ww == 1)
		ww = "星期一";
	if (ww == 2)
		ww = "星期二";
	if (ww == 3)
		ww = "星期三";
	if (ww == 4)
		ww = "星期四";
	if (ww == 5)
		ww = "星期五";
	if (ww == 6)
		ww = "星期六";
	colorfoot = "</font>"
	str = colorhead + yy + "年" + MM + "月" + dd + "日" + " " + ww + colorfoot;
	return (str);
}
function tick() {
	var today;
	today = new Date();
	document.getElementById("current_time").innerHTML = showLocale(today);
	window.setTimeout("tick()", 1000);
}
function userResult(startPage, pageSize) {
	$(".td_data").remove();
	$(".pagination").html("");
	$.getJSON("${ctx}/user_list.json",{start : startPage,limit : pageSize},
		function(json) {
			if (json.list.length > 0) {
				var tem = json.totalSize;
				var prePage = (startPage == null || startPage < 2) ? 1
						: startPage - 1;
				var nextPage = (startPage == null || startPage < 2) ? 2
						: startPage + 1;
				if (nextPage > tem)
					nextPage = tem;
				//加分页条
				$(".pagination").append("<li><a onclick=\"userResult("
					+ prePage + ")\" aria-label=\"Previous\"> <span aria-hidden=\"true\">&laquo;</span></a></li>");
				var i = 0;
				while (tem - i > 0) {
					$(".pagination").append("<li><a onclick=\"userResult("
									+ (++i) + ")\" >" + i
									+ "</a></li>");
				}
				$(".pagination").append(
					"<li><a onclick=\"userResult("
							+ nextPage + ")\" aria-label=\"Next\"> <span "
							+"aria-hidden=\"true\">&raquo;</span></a></li>");
				$(".pagination a").each(function(i){
					var page = $(this).html();
					if(startPage == i){
						$(this).attr("style","background-color:#dddddd;");
						$(this).addClass("pagecolor");
					}
				});
					//加数据
					$.each(json.list,function(i, item) {
						$("#outstore_feedback_table").append("<tr class='td_data'><td class=\"anySelect\">"
							+ "<label><input  type=\"checkbox\" userId=\""+item.id+"\" ></label></td><td>"
																		+ item.realname
																		+ "</td><td>"
																		+ item.tel
																		+ "</td><td>"
																		+ item.birth
																		+ "</td><td>"
																		+ (item.dot == 401 ? "金牛支行营业室（沙湾路）" : item.dot == 402?"成都花园支行（青羊大道）":item.dot == 403?"荷花池支行（金牛万达旁）":item.dot == 404?"外西支行（花牌坊北街":
																		+ item.dot == 405?"天回支行（天回镇上街）":item.dot == 406?"高笋塘支行（二环路北三段）":item.dot == 407?"西郊支行（十二桥路）":item.dot == 408?"洞子口支行（洞子口）":item.dot == 409?"洞子口支行（洞子口）":
																		+ item.dot==410?"蜀鑫支行（蜀鑫路）":	item.dot==411?"蜀西支行（蜀西路）":item.dot==412?"五福支行（蓉北商贸大道）":item.dot==413?"茶店子支行（茶店子东街）":item.dot==414?"国际商贸城支行（国际商贸城）":
																		+ item.dot==415?"光华逸家分理处（万家湾光华逸家小区）":item.dot==416?"大湾分理处（军区总医院内）":item.dot==417?"蜀汉路支行（蜀蓉路）":item.dot==418?"星辰支行（九里堤星辰路）":"")
																		+ "</td><td>"
																		+ item.integration
																		+ "</td></tr>");
											});

							//重新给所有的非全选复选框绑定单击事件
							$("#outstore_feedback_table :checkbox[id!='allSelect']").unbind("click");
							$("#outstore_feedback_table :checkbox[id!='allSelect']").click(
								function() {
									if ($(this).attr("myattr") == "selected") {
										$(this).removeAttr(
												"myattr");
										$("#allSelect")
												.removeAttr(
														"myattr");
										document
												.getElementById("allSelect").checked = false;
									} else {
										$(this).attr("myattr",
												"selected");
										if ($(
												"#outstore_feedback_table :checkbox[id!='allSelect']")
												.size() == $(
												"#outstore_feedback_table :checkbox[id!='allSelect'][myattr]")
												.size()) {
											document
													.getElementById("allSelect").checked = true;
											$("#allSelect")
													.attr(
															"myattr",
															"selected");
										}
									}
								});
		}
	});
}
$(function() {
	tick();
	 laydate({
	        istime: true,
	        elem: '#birth',
	       
	        event: 'focus'      
	    });    /* 日期输入 */
	    
	$("#allSelect").click(function() {
		if ($(this).attr("myattr") == "selected") {
			$(this).removeAttr("myattr");
			$("#outstore_feedback_table :checkbox[id!='allSelect']").each(function() {
				if ($(this).attr("myattr") == "selected")
					$(this).click();
			});
		} else {
			$(this).attr("myattr", "selected");
			$("#outstore_feedback_table :checkbox[id!='allSelect']").each(function() {
				if ($(this).attr("myattr") != "selected")
					$(this).click();
			});
		}
	});
	userResult();
	
	/*为添加修改用户面板设置网点*/
	$.getJSON("${ctx}/dictionary_list.json",{start : 1,limit : 30,code : "dot"},function(json){
		$(":input[name='dot.id']").html("");
		$(":input[name='dot.id']").append("<option>请选择网点</option>");
		$.each( json.list, function(i, item){
			$(":input[name='dot.id']").append("<option value=\""+ item.id +"\">"+item.name+"</option>");
		});
	});
	
	/*添加用户*/
	$("#submit_add_user").click(function(){
		var $form = $("#add_user_form");
		$.post($form.attr("action"), $form.serialize(),
		   function(data){
		     alert(data.msg);
		     if(data.success){
		    	 userResult();
		    	 $("#close_add_user").click();
		     }
		}, "json");
		return false;
	});
	
	/*修改用户*/
	$("#update_user_button").click(function(){
		var $selected = $("#outstore_feedback_table :checkbox[id!='allSelect'][myattr]");
		if($selected.size() == 0){
			alert("请选择用户");
			return false;
		}
		if($selected.size() > 1){
			alert("每次只能修改一个用户");
			return false;
		}
		var userId = $selected.attr("userId");
		$.getJSON("${ctx}/user_get.json",{id:userId},function(json){
			$.each( json.user, function(key, value){
				if(key != "dot"){
					$("#update_user_form :input[name='"+key+"']").val(value);
				}
				else if(key=="dot"){
					$("#dotSelect").val(value);
				}
			});
		});
	});
	$("#submit_update_user").click(function(){
		var $form = $("#update_user_form");
		$.post($form.attr("action"), $form.serialize(),
		   function(data){
		     alert(data.msg);
		     if(data.success){
		    	 userResult();
		    	 $("#close_update_user").click();
		     }
		}, "json");
		return false;
	});
	
	/*删除用户*/
    $("#remove_user").click(function(){
    	var $selected = $("#outstore_feedback_table :checkbox[id!='allSelect'][myattr]");
   		if($selected.size() < 1){
   			alert("请选择需要删除的用户");
   			return false;
   		}
        var a = confirm("是否删除选中的"+$selected.size()+"个用户？");
        if(a){
    		var ids = "";
    		$selected.each(function(){
    			ids += $(this).attr("userId") + ",";
    		});
    		if(ids.length > 1)
    			ids = ids.substring(0, ids.length - 1);
    		else
    			return false;
        	var args = {};
        	args.ids = ids;
        	$.post("${ctx}/user_delete.json", args,
        			   function(data){
        			     alert(data.msg);
        			     if(data.success){
        			    	 userResult();
        			     }
        			}, "json");
        }
        return false;
    });
});
</script>
<script>
$(document).ready(function(){
    $("#new_select").change(function() {
        var a = $("#new_select").children('option:selected').val();
        var b = $("#new_select #am").val();
        if (a != b) {
            $("#new_point").hide();
        }
        else{
            $("#new_point").show();
        }
    })
    $("#alter_select").change(function() {
        var a = $("#alter_select").children('option:selected').val();
        var b = $("#alter_select #am1").val();
        if (a != b) {
            $("#alter_point").hide();
        }
        else{
            $("#alter_point").show();
        }
    })
});
</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row"
			style="padding: 10px; box-shadow: 0 5px 15px #999999;">
			<div class="col-md-offset-1 col-md-2">
				<img src="${staticPage}/image/logo.png" width="200" height="49"
					alt="Logo" />
			</div>
			<div class="col-md-2">
				<span class="logoStyle">权证管理系统</span>
			</div>
			<div class="col-md-2">
				<div id="current_time" class="navStyle"></div>
			</div>
			<!-- 			<div class="col-md-1">
				<div class="navStyle">职位</div>
			</div> -->
			<div class="col-md-2">
				<a class="navStyle" href="${ctx}/password_management.do">账号(${current_user.realname})</a>
			</div>
			<div class="col-md-2">
				<a href="${ctx}/user_logout.do" class="navExit"><span
					class="glyphicon glyphicon-import" aria-hidden="true"></span>退出</a>
			</div>
		</div>
		<div class="row">
			<div class="clearfix visible-xs-block"></div>

			<div class="col-md-offset-1 col-md-4">
				<span class="Ulocation">您的当前位置：</span>
				<ol class="breadcrumb"
					style="background-color: #ffffff; margin-top: 15px;">
					<li class="active"><a href="${ctx}/admin_record.do">用户管理</a></li>
				</ol>
			</div>

		</div>
		<div class="row">
			<div class="col-md-offset-1 col-md-2">
				<!--侧边栏和主内容在同一个row内,侧边栏左侧和主内容右侧各留有一个col的距离-->

				<div class="panel-group" id="accordion" style="margin-left: 12px">
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color: #02c69e">
							<h4 class="panel-title">
								<a href="${ctx}/admin_user.do" data-parent="#accordion"
									style="background-color: #02c69e"> 用户管理 </a>
							</h4>
						</div>
					</div>
					<%-- 
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color: #02c69e">
							<h4 class="panel-title">
								<a href="${ctx}/admin_role.do" data-parent="#accordion"
									style="background-color: #02c69e">角色管理 </a>
							</h4>
						</div>
					</div>
					 --%>
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color: #02c69e">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion"
									href="#collapseOne">字典管理</a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse">
							<div class="panel-body" style="padding: 0; line-height: 10px">
								<div class="list-group" style="margin-bottom: 0;">
									<a href="${ctx}/admin_dictionary.do" class="list-group-item"
										style="border-top-left-radius: 0; border-top-right-radius: 0; border: 0">网点管理</a>
									<%-- <a href="${ctx}/am_car_registration.do" class="list-group-item"
										style="border-bottom-left-radius: 0; border-bottom-right-radius: 0;">机动车登记证</a> --%>
								</div>
							</div>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading" style="background-color: #02c69e">
							<h4 class="panel-title">
								<a href="${ctx}/admin_record.do" data-parent="#accordion"
									style="background-color: #02c69e"> 日志管理 </a>
							</h4>
						</div>
					</div>

				</div>
			</div>
			<div class="col-md-8" style="">
				<!--侧边栏和主内容在同一个row内-->
				<div class="boderbox">
					<div class="row">
						<div class="col-md-5">
							<div class="input-group" style="margin: -9px 0 5px">
								<input type="text" class="form-control" placeholder="请输入关键字">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button"
										style="background-color: #02c69e">搜索</button>
								</span>
							</div>
						</div>
						<div class="col-md-offset-4 col-md-3">
							<div class="btn-group" role="group" aria-label="..."
								style="margin: -9px 0 5px;">
								<button id="add_user_button" type="button"
									class="btn btn-default" data-content="添加" data-toggle="modal"
									data-target="#newModal">
									<span class="glyphicon glyphicon-plus" style="color: #02c69e;"></span>
								</button>
								<button id="update_user_button" type="button"
									class="btn btn-default" data-content="修改" data-toggle="modal"
									data-target="#alterModal">
									<span class="glyphicon glyphicon-edit" style="color: #02c69e;"></span>
								</button>
								<button id="remove_user" type="button" class="btn btn-default"
									data-content="删除">
									<span class=" glyphicon glyphicon-remove"
										style="color: rgba(213, 1, 0, 0.50);"></span>
								</button>
							</div>
						</div>
					</div>
					<!-- 请输入关键字，搜索-->
					<hr style="margin-top: 0" />

					<div id="myTabContent" class="tab-content  scrollbar">
						<!--内联显示的框架，含滚动条-->
						<table class="table table-bordered" style="width: 1200px;"
							id="outstore_feedback_table">
							<tr>
								<th class="anySelect"><label class="checkbox-inline">
										<input type="checkbox" id="allSelect" value="option3">全选
								</label></th>
								<th style="text-align: center;">姓名</th>
								<th style="text-align: center;">电话</th>
								<th style="text-align: center;">生日</th>
								<th style="text-align: center;">网点</th>
								<th style="text-align: center;">积分</th>
							</tr>
						</table>
					</div>
					<div class="row" align="middle">
						<nav>
							<ul class="pagination">
							</ul>
						</nav>
					</div>
					<!--主内容，row中占了8个col，侧边栏占了2个-->
					<!-- 模态框（Modal） -->
					<div class="modal fade" id="newModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content" style="font-size: 14px;">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="newModalLabel">新增用户信息</h4>
								</div>
								<form id="add_user_form" action="${ctx}/user_add.json"
									method="post">
									<div class="modal-body">
										<div class="row">
											<div class="col col-md-2">*姓名：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="userName" aria-describedby="basic-addon3" />
											</div>
											<div class="col col-md-2">*用户名：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="loginName" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-2">*工号：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="jobNumber" aria-describedby="basic-addon3" />
											</div>
											<div class="col col-md-2">*密码：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="password" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div id="new_position" class="row">
											<div class="col col-md-2">*职位：</div>
											<div class="col col-md-4">
												<select class="form-control" name="job" id="new_select">
													<option>请选择职位</option>
													<option id="am" value="客户经理">客户经理</option>
													<option value="零售业务部权证岗管理A">零售业务部权证岗管理A</option>
													<option value="零售业务部权证岗管理B">零售业务部权证岗管理B</option>
													<option value="信贷部门">信贷部门</option>
													<option value="库管人员">库管人员</option>
													<option value="后台管理人员">后台管理人员</option>
												</select>
											</div>
										</div>
										<br>

										<div class="row">
											<div id="new_point">
												<div class="col col-md-2">*网点名称：</div>
												<div class="col col-md-4">
													<select class="form-control" name="dot.id"
														id="add_dot_name">
													</select>
												</div>
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-2">手机号码：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="cellPhone" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-2">邮箱：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="email" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-2">身份证：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="identityCard" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-2">联系地址：</div>
											<div class="col col-md-4">
												<textarea class="form-control" rows="3" name="address"></textarea>
											</div>
										</div>
										<br>
										<div class="modal-footer">
											<button id="close_add_user" type="button"
												class="btn btn-default" data-dismiss="modal">关闭</button>
											<button id="submit_add_user" type="button"
												class="btn btn-primary" style="background-color: #02c69e">保存
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
					<div class="modal fade" id="alterModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content" style="font-size: 14px;">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="alterModalLabel">修改用户信息</h4>
								</div>
								<form id="update_user_form" action="${ctx}/user_update.json"
									method="post">
									<input type="hidden" name="id" />
									<div class="modal-body">
										<div class="row">
											<div class="col col-md-3">姓名：</div>
											<div class="col col-md-4">
												<input type="text" name="realname" class="form-control"
													placeholder="" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-3">生日：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder="" id="birth" name="birth" aria-describedby="basic-addon3"   onclick="laydate()"/>
											</div>
										</div>
										<br>
										<div class="row">
											<div id="alter_point">
												<div class="col col-md-3">网点名称：</div>
												<div class="col col-md-4">
													<select class="form-control" name="dot" id="dotSelect">
															<option value="" ></option>
										                    <option value="401">金牛支行营业室（沙湾路）</option>
										                    <option value="402">成都花园支行（青羊大道）</option>
										                    <option value="403">荷花池支行（金牛万达旁） </option>
										                    <option value="404">外西支行（花牌坊北街） </option>
										                    <option value="405">天回支行（天回镇上街）</option>
										                    <option value="406">高笋塘支行（二环路北三段）</option>
										                    <option value="407">西郊支行（十二桥路）</option>
										                    <option value="408">洞子口支行（洞子口）</option>
										                    <option value="409">洞子口支行（洞子口）</option>
										                    <option value="410">蜀鑫支行（蜀鑫路）</option>
										                    <option value="411">蜀西支行（蜀西路）</option>
										                    <option value="412">五福支行（蓉北商贸大道）</option>
										                    <option value="413">茶店子支行（茶店子东街）</option>
										                    <option value="414">国际商贸城支行（国际商贸城）</option>
										                    <option value="415">光华逸家分理处（万家湾光华逸家小区）</option>
										                    <option value="416">大湾分理处（军区总医院内）</option>
										                    <option value="417">蜀汉路支行（蜀蓉路）</option>
										                    <option value="418">星辰支行（九里堤星辰路）</option>
													</select>
												</div>
											</div>
										</div>
										<br>

										<div class="row">
											<div class="col col-md-3">手机号码：</div>
											<div class="col col-md-4">
												<input type="text" class="form-control" placeholder=""
													name="tel" aria-describedby="basic-addon3" />
											</div>
										</div>
										<br>

									
										<div class="modal-footer">
											<button id="close_update_user" type="button"
												class="btn btn-default" data-dismiss="modal">关闭</button>
											<button id="submit_update_user" type="button"
												class="btn btn-primary" style="background-color: #02c69e">保存
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>

			</div>
		</div>
		<!--row包含 主内容和侧边栏-->
	</div>
</body>
</html>